<script setup>
import { ref, onMounted } from 'vue'
import { ElCard, ElRow, ElCol, ElButton, ElIcon, ElSelect, ElOption, ElDatePicker } from 'element-plus'
import { Refresh, Download, PieChart } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 图表引用
const resourceDistributionChartRef = ref(null)

// 筛选条件
const timeRange = ref('month')
const startDate = ref('')
const endDate = ref('')
const classFilter = ref('all')

// 班级选项
const classOptions = ref([
  { value: 'all', label: '全部班级' },
  { value: '1班', label: '1班' },
  { value: '2班', label: '2班' },
  { value: '3班', label: '3班' },
  { value: '4班', label: '4班' },
  { value: '5班', label: '5班' }
])

// 时间范围选项
const timeRangeOptions = ref([
  { value: 'week', label: '近7天' },
  { value: 'month', label: '近30天' },
  { value: 'quarter', label: '近90天' },
  { value: 'year', label: '近一年' },
  { value: 'custom', label: '自定义' }
])

// 初始化资源使用分布图表
const initResourceDistributionChart = () => {
  if (resourceDistributionChartRef.value) {
    const chart = echarts.init(resourceDistributionChartRef.value)
    chart.setOption({
      title: {
        text: '资源使用分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '资源类型',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })

    window.addEventListener('resize', () => chart.resize())
    return chart
  }
  return null
}

// 生成模拟数据
const generateMockData = () => {
  // 资源使用分布数据
  const resourceDistributionData = [
    { name: '教学视频', value: Math.floor(Math.random() * 40) + 30 },
    { name: '文档资料', value: Math.floor(Math.random() * 30) + 20 },
    { name: '作业测试', value: Math.floor(Math.random() * 20) + 10 },
    { name: '课件PPT', value: Math.floor(Math.random() * 15) + 5 },
    { name: '其他资源', value: Math.floor(Math.random() * 10) + 2 }
  ]

  return {
    resourceDistributionData
  }
}

// 更新图表数据
const updateCharts = () => {
  const mockData = generateMockData()

  // 更新资源使用分布图表
  const resourceDistributionChart = initResourceDistributionChart()
  if (resourceDistributionChart) {
    resourceDistributionChart.setOption({
      series: [
        {
          data: mockData.resourceDistributionData
        }
      ]
    })
  }
}

// 刷新数据
const refreshData = () => {
  updateCharts()
}

// 下载数据
const downloadData = () => {
  // 实际应用中这里应该实现数据导出功能
  ElNotification.info('数据下载中...')
}

// 页面加载时初始化
onMounted(() => {
  // 延迟初始化图表，确保DOM已渲染
  setTimeout(() => {
    updateCharts()
  }, 100)
})
</script>

<template>
  <div class="statistics-container">
    <div class="header">
      <h2>资源分布分析</h2>
      <div class="filter-controls">
        <el-select
          v-model="timeRange"
          placeholder="请选择时间范围"
          style="width: 150px; margin-right: 10px;"
          @change="refreshData"
        >
          <el-option v-for="option in timeRangeOptions" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
        <template v-if="timeRange === 'custom'">
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="开始日期"
            style="width: 150px; margin-right: 10px;"
          />
          <el-date-picker
            v-model="endDate"
            type="date"
            placeholder="结束日期"
            style="width: 150px; margin-right: 10px;"
          />
        </template>
        <el-select
          v-model="classFilter"
          placeholder="请选择班级"
          style="width: 120px; margin-right: 10px;"
          @change="refreshData"
        >
          <el-option v-for="option in classOptions" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
        <el-button @click="refreshData">
          <el-icon><Refresh /></el-icon> 刷新
        </el-button>
        <el-button @click="downloadData">
          <el-icon><Download /></el-icon> 导出
        </el-button>
      </div>
    </div>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="chart-card">
          <div class="chart-header">
            <h3>资源使用分布</h3>
            <el-icon class="chart-icon"><PieChart /></el-icon>
          </div>
          <div ref="resourceDistributionChartRef" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.statistics-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.chart-card {
  height: 100%;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.chart-icon {
  color: #4096ff;
}
</style>